<template>
  <div class="edu-page-warp">
    <div class="edu-page-title">我的申请</div>
    <el-card shadow="never" body-style="padding: 24px;">
      <el-table :data="approFlowList" style="width: 100%" class="has-top-border" stripe>
        <el-table-column prop="no" label="申请编号"/>
        <el-table-column prop="applicantId" label="申请人ID"/>
        <el-table-column prop="applicantName" label="申请人"/>
        <el-table-column prop="wfTypeName" label="申请类型"/>
        <el-table-column prop="approvorName" label="当前处理人"/>
        <el-table-column prop="time" label="申请时间">
          <template slot-scope="scope">{{ scope.row.time | formatDate }}</template>
        </el-table-column>
        <el-table-column prop="result" label="审批状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.result == 'Process'" type="success">进行中</el-tag>
            <el-tag v-if="scope.row.result == 'End'" type="info">已结束</el-tag>
            <el-tag v-if="scope.row.result == 'Reject'" type="warning">已驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="showRollDetail(scope.row.no)">查看明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="edu-pagination">
        <div class="float-left">
          <span class="edu-total">Total: {{ queryItem.total }}</span>
        </div>
        <div class="float-right">
          <el-pagination
            :current-page="queryItem.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="20"
            :total="queryItem.total"
            layout=" sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { selectApproFlowList } from "common/src/api/approval";
import { mapState } from "vuex";
import filters from "common/src/filters";
export default {
  name: "bclStudentRollCheck",
  filters: {
    formatDate(date) {
      return filters.formatDate(date, "yyyy/MM/dd hh:mm:ss");
    }
  },
  data() {
    return {
      approFlowList: [],
      queryItem: {
        total: 0,
        pageNum_: 1,
        pageSize_: 20,
        applicantId: ""
      }
    };
  },
  computed: {
    ...mapState({
      mockUser: state => state.session.mockUser
    })
  },
  created() {
    this.queryItem.applicantId = this.mockUser
      ? this.mockUser.uid
      : localStorage.getItem("uid");
    this.init(this.queryItem);
  },
  methods: {
    showRollDetail(id) {
      this.$router.push("/StudentRollDetail?id=" + id);
    },
    handleSizeChange(pageSize) {
      this.queryItem.pageSize_ = pageSize;
      this.queryItem.pageNum_ = 1;
      this.init(this.queryItem);
    },
    handleCurrentChange(pageNum) {
      this.queryItem.pageNum_ = pageNum;
      this.init(this.queryItem);
    },
    init(queryItem) {
      selectApproFlowList(queryItem).then(res => {
        this.approFlowList = res.data.list;
        this.queryItem.total = res.data.total_;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
